<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="./css/header.css" />
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    <title>Document</title>
    <style>
      #mainer {
        min-height: calc(100vh - 170px);
      }
     .thumbnail .panel-img{
        height:180px;
      }
      .thumbnail .panel-caption{
       
        overflow: hidden;
      }
      .thumbnail .panel-caption a{
        color:#00BFFF;
        font-size: 20px;
      }
      .thumbnail .panel-caption a:hover{
        text-decoration: none;;
      }
    </style>
  </head>
  <body>
    <div id="bg">
      <div id="header"></div>
      <div id="mainer" class="container">
        <div class="row" id="content">
          
        </div>
        <div style="text-align: center; padding-bottom: 15px">
          <button id="show1" class="btn btn-primary">查看更多</button>
          <div id="show2" style="opacity: 0.5;" >没有更多数据了~~~~</div>
        </div>
      </div>
      <div id="footer"></div>
    </div>
    <script>
      $(function () {
        $("#header").load("./header.html");
        $("#footer").load("./footer.html");
        $("#show2").css('display','none');
        let page = 1;
       function getAquatic(){
        $.ajax({
          type:'get',
          url:'/aquatic/?page='+page,
          success:(res)=>{
            console.log(res);
            let html = '';
            if(res.total<=page*10){
              $("#show1").css('display','none');
              $("#show2").css("display",'block')
            }
            res.data.forEach(item => {
              html+=` <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
              <img class="panel-img" src="${item.img}" alt="图片" />
              <div class="caption panel-caption">
                <div style="text-align:center; text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;"><a href='infocontent.html?id=${item._id}'>${item.title}</a></div>
              </div>
            </div>
          </div>`
            });
            $("#content").html($("#content").html()+html)
          },
          error:(xhr,status,error)=>{
            console.log('出错了',error)
          }
        })
       };
       getAquatic();
       $("#show1").click(function(){
         page++;
         getAquatic();
       })
      });
    </script>
  </body>
</html>
